<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#太极 {
				/* 给框添加一个或多个阴影 */
				box-shadow: 0 0 30px pink;
				/* 太极这个圆的直径 */
				height: 400px;
				/* 太极左半边 */
				border-left: 200px solid #000000;
				/* 右半边 */
				border-right: 200px solid white;
				/* 边框圆角,圆角半径 */
				border-radius: 200px;
				/* 50% */
				/* 外边框      居中*/
				margin: 100px auto;
				/* 盒子宽度 */
				width: 0;
				position: relative;
			}

			#太极::before {
				content: '';
				/* display: block; */
				width: 40px;
				height: 40px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: -100px;
				border: 80px solid #000000;
				/* top: 50px; */
				/* box-shadow: 0 0 0 50px black; */
			}

			#太极::after {
				content: '';
				/* display: block; */
				width: 40px;
				height: 40px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
				left: -100px;
				
				bottom: 0px;
				border: 80px solid white;
				/* box-shadow: 0 0 0 50px white; */
			}
			
		</style>
	</head>
	<body>
		<div id="太极"></div>
	</body>
</html>0